<template>
  <a-modal centered v-model="visible" title="退件" width="80%">
    <template slot="footer">
      <a-button
        v-if="(tabKey != '500' && tabKey != '600') || modalFlag != 'systemEdit'"
        style="background: #d7d7d7; color: #fff; border: none"
        @click="
          () => {
            this.visible = false;
          }
        "
        >取消</a-button
      >

      <a-button
        v-if="
          (tabKey === '500' || tabKey === '600') &&
          modalFlag === 'systemEdit' &&
          (retreatState === '116' || retreatState === '126')
        "
        style="background: #d7d7d7; color: #fff; border: none"
        @click="
          () => {
            this.visible = false;
          }
        "
        >取消</a-button
      >
      <a-button
        :loading="cancelLoading"
        v-if="
          (tabKey === '500' || tabKey === '600') &&
          modalFlag === 'systemEdit' &&
          retreatState != '116' &&
          retreatState != '126'
        "
        style="background: #f00; color: #fff; border: none"
        @click="whSubmit('66')"
        >取消入库</a-button
      >
      <a-button
        :loading="loading"
        type="primary"
        v-if="tabKey === '500' && modalFlag === 'systemEdit'"
        @click="whSubmit('46')"
        >确认接收</a-button
      >
      <a-button
        :loading="loading"
        type="primary"
        v-if="modalFlag === 'serve'"
        @click="sendBill"
        >发送账单</a-button
      >
      <a-button
        :loading="loading"
        type="primary"
        v-if="
          tabKey === '600' &&
          modalFlag === 'systemEdit' &&
          retreatState != '116' &&
          retreatState != '126'
        "
        @click="figureOut"
        >处理完成</a-button
      >

      <a-button
        v-if="
          (tabKey === '6' || tabKey === '66') && modalFlag === 'editcClientSide'
        "
        :loading="loading"
        type="primary"
        @click="handleOk(tabKey)"
        >确认</a-button
      >
      <a-button
        v-if="modalFlag === 'add'"
        :loading="loading"
        type="primary"
        @click="handleOk(tabKey)"
        >确认</a-button
      >
      <a-button
        v-if="tabKey === '500' && modalFlag === 'editcClientSide'"
        :loading="loading"
        type="primary"
        @click="isCheckBtn"
        >确认</a-button
      >
      <a-button
        v-if="tabKey === '6' && modalFlag === 'systemEdit'"
        :loading="loading"
        type="primary"
        @click="submit"
        >提交</a-button
      >
    </template>
    <a-spin tip="Loading..." :spinning="spinning">
      <h3>退件信息</h3>
      <div>
        <a-form-model layout="inline" :model="dto" :rules="rules" ref="fromDto">
          <a-form-model-item label="退件标题:" prop="title">
            <a-input :maxLength="128" v-if="inputShow != 'info'" v-model="dto.title"> </a-input>
            <span v-if="inputShow === 'info'">
              {{ dto.title }}
            </span>
          </a-form-model-item>
          <a-form-model-item label="退至仓库:" prop="warehousingId">
            <a-select
              v-if="inputShow != 'info'"
              v-model="dto.warehousingId"
              show-search
              option-filter-prop="children"
              style="width: 200px"
              :filter-option="filterOption"
              @change="(value, option) => changeWarehousing(option)"
            >
              <a-select-option
                :value="item.warehouseId"
                v-for="item in warehouse"
                :key="item.warehouseId"
                :warehousingName="item.titleName"
              >
                {{ item.titleName }}
              </a-select-option>
            </a-select>
            <span v-if="inputShow === 'info'">
              {{ dto.warehousingName }}
            </span>
          </a-form-model-item>
          <a-form-model-item label="退件处理:" prop="typeId">
            <a-select
              v-if="inputShow != 'info'"
              v-model="dto.typeId"
              show-search
              option-filter-prop="children"
              style="width: 200px"
              :filter-option="filterOption"
              @change="(value, option) => changeTypeId(option)"
            >
              <a-select-option
                :value="item.key"
                v-for="item in treatmentArray"
                :key="item.key"
                :titles="item.title"
              >
                {{ item.title }}
              </a-select-option>
            </a-select>
            <span v-if="inputShow === 'info'">
              {{ dto.typeName }}
            </span>
          </a-form-model-item>
        </a-form-model>
      </div>
      <h3 style="margin-top: 10px">退件清单</h3>
      <p style="display: flex; line-height: 30px" v-if="inputShow != 'info'">
        <a-button
          class="blueBtn"
          type="primary"
          style="margin-left: 20px"
          @click="addBox"
        >
          新增箱子
        </a-button>
        <a-button
          @click="forecastData"
          class="blueBtn"
          type="primary"
          style="margin-left: 20px"
        >
          拉取预报数据
        </a-button>

        <span style="width: 200px; margin-left: 10px">
          <a-input :maxLength="128" v-model="applyCode" placeholder="请输入预报单号" />
        </span>
      </p>
      <!-- 表格 -->
      <a-table
        size="small"
        bordered
        :data-source="dto.logisticsInfos"
        :pagination="false"
        :scroll="{ x: 1300, y: 250 }"
      >
        <!-- 五楼方式 -->
        <a-table-column
          key="logisticsId"
          data-index="logisticsId"
          align="center"
          width="10%"
        >
          <span slot="title"> 物流商</span>
          <template slot-scope="text, record">
            <a-select
              :style="
                record.logisticsId === null || record.logisticsId === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              v-if="inputShow != 'info'"
              placeholder="请选择物流商"
              size="small"
              show-search
              option-filter-prop="children"
              style="width: 100%"
              @change="(value, option) => changeLogisticsName(option, record)"
              v-model="record.logisticsName"
            >
              <a-select-option
                v-for="item in logisticsArray"
                :value="item.id"
                :key="item.id"
                :logisticsPlatform="item.logisticsPlatform"
                :serviceName="item.serviceName"
                :sysLogisticsId="item.sysLogisticsId"
                :sysLogisticsServiceItemId="item.sysLogisticsServiceItemId"
              >
                <a-tooltip>
                  <template slot="title">
                    {{ item.serviceName }}/{{ item.logisticsPlatform }}
                  </template>
                  {{ item.serviceName }}/{{ item.logisticsPlatform }}
                </a-tooltip>
              </a-select-option>
            </a-select>
            <span v-if="inputShow === 'info'">
              {{ record.logisticsName }}
            </span>
          </template>
        </a-table-column>
        <!-- 运单编号 -->
        <a-table-column
          key="waybillNm"
          data-index="waybillNm"
          align="center"
          width="10%"
        >
          <span slot="title">运单号</span>
          <template slot-scope="text, record">
            <a-input
            :maxLength="128"
              v-if="inputShow != 'info'"
              :style="
                record.waybillNm === null || record.waybillNm === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              size="small"
              style="width: 6rem"
              v-model="record.waybillNm"
            />
            <span v-if="inputShow === 'info'">
              {{ record.waybillNm }}
            </span>
          </template>
        </a-table-column>
        <!-- sku信息 -->
        <a-table-column
          key="byRetreatProductInfos"
          class="columns-tab"
          data-index="byRetreatProductInfos"
          align="center"
          width="38%"
        >
          <div slot="title" class="columns">
            <div style="width: 20%">
              <span style="color: red">*</span>商品名称
            </div>
            <div style="width: 20%">
              <span style="color: red">*</span>退件SKU
            </div>
            <div style="width: 20%"><span style="color: red">*</span>数量</div>
            <div style="width: 20%">FNSKU</div>
            <div
              :style="
                tabKey === '600' && modalFlag != 'add' && port != '2'
                  ? 'width: 20%'
                  : 'border: none; width: 20%'
              "
            >
              <span
                v-if="tabKey === '600' && modalFlag != 'add' && port != '2'"
              >
                仓位
              </span>
            </div>
          </div>
          <!-- 表格 -->
          <template slot-scope="text, record">
            <ul
              class="pto-list"
              v-for="(item, i) in record.byRetreatProductInfos"
              :key="item.key"
            >
              <li style="width: 20%">
                {{ item.skuName }}
              </li>
              <li
                style="width: 20%"
                :style="
                  item.skuId === null || item.skuId === ''
                    ? 'border: 1px solid #f00;border-radius:5px'
                    : 'border: 1px solid #ccc;border-radius:5px'
                "
              >
                <a-select
                  v-model="item.sku"
                  v-if="inputShow != 'info'"
                  style="width: 100%"
                  size="small"
                  show-search
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  @change="(value, option) => changeSku(option, item, record)"
                  placeholder="请选择SKU"
                >
                  <a-select-option
                    :value="v.sku"
                    v-for="v in RetreatStockArray"
                    :key="v.id"
                    :sku="v.sku"
                    :name="v.skuName"
                    :skuid="v.skuId"
                    :productTag="v.productTag"
                  >
                    <a-tooltip>
                      <template slot="title">
                        {{ v.sku }}
                      </template>
                      {{ v.sku }}
                    </a-tooltip>
                  </a-select-option>
                </a-select>
                <span v-if="inputShow === 'info'">
                  {{ item.sku }}
                </span>
              </li>
              <li
                style="width: 20%"
                :style="
                  item.productNumber === null || item.productNumber === ''
                    ? 'border: 1px solid #f00;border-radius:5px'
                    : 'border: 1px solid #ccc;border-radius:5px'
                "
              >
                <a-input-number
                  v-if="inputShow != 'info'"
                  style="width: 100%"
                  @change="
                    item.productNumber === null
                      ? (item.productNumber = 1)
                      : item.productNumber
                  "
                  v-model="item.productNumber"
                  size="small"
                  :min="1"
                  :max="100000"
                  :default-value="1"
                />
                <span v-if="inputShow === 'info'">
                  {{ item.productNumber }}
                </span>
              </li>
              <li style="width: 20%">
                <a-input
                :maxLength="128"
                  v-if="inputShow != 'info'"
                  v-model="item.fnsku"
                  size="small"
                />
                <span v-if="inputShow === 'info'">
                  {{ item.fnsku }}
                </span>
              </li>
              <li
                style="border: none; width: 20%"
                class="row-btn"
                v-if="
                  (inputShow != 'info' && tabKey != '600') ||
                  modalFlag === 'add'
                "
              >
                <a-icon
                  v-if="
                    record.byRetreatProductInfos.length === 1 ||
                    record.byRetreatProductInfos.length - 1 === i
                  "
                  style="color: #3eae7c"
                  type="plus-circle"
                  theme="filled"
                  @click="addSku(record)"
                />
                <a-icon
                  type="minus-circle"
                  style="color: #b4b4b4"
                  theme="filled"
                  @click="delSku(record, item)"
                />
              </li>
              <!-- 状态600 -->
              <li
                style="width: 20%"
                v-if="tabKey === '600' && modalFlag != 'add' && port != '2'"
              >
                <a-cascader
                  :disabled="dto.typeId === '10181' || dto.typeId === '10186'"
                  v-model="item.locationId"
                  v-if="
                    retreatState != '116' &&
                    retreatState != '126' &&
                    modalFlag === 'systemEdit'
                  "
                  :style="
                    (item.locationId === null || item.locationId === '') &&
                    dto.typeId != '10181' &&
                    dto.typeId != '10186'
                      ? 'border: 1px solid #f00;border-radius:5px'
                      : 'border: 1px solid #ccc;border-radius:5px'
                  "
                  size="small"
                  placeholder=""
                  :options="storageLocation"
                  change-on-select
                  @change="
                    (value, selectedOptions) =>
                      onChangeLocation(value, selectedOptions, item)
                  "
                />
                <span
                  v-if="
                    retreatState === '116' ||
                    retreatState === '126' ||
                    modalFlag != 'systemEdit'
                  "
                >
                  {{ item.locationName }}
                </span>
              </li>
            </ul>
          </template>
        </a-table-column>
        <!-- 装箱数量 -->
        <a-table-column
          key="packingNumber"
          data-index="packingNumber"
          align="center"
          width="8%"
        >
          <span slot="title"> <span style="color: red">*</span>箱数</span>
          <template slot-scope="text, record">
            <span v-if="inputShow === 'info'">
              {{ record.packingNumber }}
            </span>
            <a-input
            :maxLength="128"
              v-if="inputShow != 'info'"
              :style="
                record.packingNumber === null || record.packingNumber === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              @keyup="
                () => {
                  if (record.packingNumber) {
                    record.packingNumber = record.packingNumber.replace(
                      /[^\d\.]/g,
                      ''
                    );
                  }
                }
              "
              size="small"
              style="width: 100%"
              v-model="record.packingNumber"
            />
          </template>
        </a-table-column>
        <!-- 选择箱子/ -->
        <a-table-column
          key="4"
          data-index="4"
          align="center"
          width="25%"
          v-if="tabKey === '600' && modalFlag != 'add'"
        >
          <span slot="title">选择箱子</span>
          <template slot-scope="text, record" class="box-sizes">
            <a-select
              :disabled="dto.typeId === '10181'"
              :style="
                (record.pageTypeId === null || record.pageTypeId === '') &&
                dto.typeId != '10181'
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              v-if="
                retreatState != '116' &&
                retreatState != '126' &&
                modalFlag === 'systemEdit'
              "
              v-model="record.pageType"
              size="small"
              show-search
              option-filter-prop="children"
              style="width: 80px"
              :filter-option="filterOption"
              @change="
                (value, option) => handleChangeBox(value, option, record)
              "
            >
              <a-select-option
                :lengthNumber="item.lengthNumber"
                :highNumber="item.highNumber"
                :wideNumber="item.wideNumber"
                v-for="item in boxlist"
                :key="item.key"
                :value="item.key"
                :boxName="item.boxName"
              >
                {{ item.boxName }}
              </a-select-option>
            </a-select>
            <span
              v-if="
                retreatState === '116' ||
                retreatState === '126' ||
                modalFlag != 'systemEdit'
              "
            >
              {{ record.pageType }}
            </span>
            <a-input
            :maxLength="128"
              v-if="
                retreatState != '116' &&
                retreatState != '126' &&
                modalFlag === 'systemEdit'
              "
              disabled
              size="small"
              style="width: 55px"
              v-model="record.newLengthNumber"
            /><span
              v-if="
                retreatState === '116' ||
                retreatState === '126' ||
                modalFlag != 'systemEdit'
              "
            >
              {{ record.newLengthNumber }} </span
            >*<a-input
            :maxLength="128"
              v-if="
                retreatState != '116' &&
                retreatState != '126' &&
                modalFlag === 'systemEdit'
              "
              disabled
              size="small"
              style="width: 55px"
              v-model="record.newWideNumber"
            /><span
              v-if="
                retreatState === '116' ||
                retreatState === '126' ||
                modalFlag != 'systemEdit'
              "
            >
              {{ record.newWideNumber }} </span
            >*<a-input
            :maxLength="128"
              v-if="
                retreatState != '116' &&
                retreatState != '126' &&
                modalFlag === 'systemEdit'
              "
              disabled
              size="small"
              style="width: 55px"
              v-model="record.newHighNumber"
            /><span
              v-if="
                retreatState === '116' ||
                retreatState === '126' ||
                modalFlag != 'systemEdit'
              "
            >
              {{ record.newWideNumber }}
            </span>
          </template>
        </a-table-column>
        <!-- 长宽高 -->
        <a-table-column
          key="lengthNumber"
          data-index="lengthNumber"
          align="center"
          width="20%"
        >
          <span slot="title">
            <span style="color: red">*</span>长*宽*高(cm)</span
          >
          <template slot-scope="text, record" class="box-sizes">
            <span v-if="inputShow === 'info'">
              {{ record.lengthNumber }}*
            </span>
            <a-input
            :maxLength="128"
              v-if="inputShow != 'info'"
              :style="
                record.lengthNumber === null || record.lengthNumber === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              @keyup="
                () => {
                  if (record.lengthNumber) {
                    record.lengthNumber = record.lengthNumber.replace(
                      /[^\d\.]/g,
                      ''
                    );
                  }
                }
              "
              size="small"
              style="width: 4rem"
              v-model="record.lengthNumber"
            />
            <span v-if="inputShow === 'info'"> {{ record.wideNumber }}* </span>
            <a-input
            :maxLength="128"
              v-if="inputShow != 'info'"
              :style="
                record.wideNumber === null || record.wideNumber === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              @keyup="
                record.wideNumber = record.wideNumber.replace(/[^\d\.]/g, '')
              "
              size="small"
              style="width: 4rem"
              v-model="record.wideNumber"
            />
            <span v-if="inputShow === 'info'">
              {{ record.highNumber }}
            </span>
            <a-input
            :maxLength="128"
              v-if="inputShow != 'info'"
              :style="
                record.highNumber === null || record.highNumber === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              @keyup="
                () => {
                  if (record.highNumber) {
                    record.highNumber = record.highNumber.replace(
                      /[^\d\.]/g,
                      ''
                    );
                  }
                }
              "
              size="small"
              style="width: 4rem"
              v-model="record.highNumber"
            />
          </template>
        </a-table-column>
        <!-- 重量 -->
        <a-table-column
          key="caratNumber"
          data-index="caratNumber"
          align="center"
          width="8%"
        >
          <span slot="title"> <span style="color: red">*</span>重量(kg)</span>
          <template slot-scope="text, record">
            <span v-if="inputShow === 'info'">
              {{ record.caratNumber }}
            </span>
            <a-input
            :maxLength="128"
              v-if="inputShow != 'info'"
              :style="
                record.caratNumber === null || record.caratNumber === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              @keyup="
                () => {
                  if (record.caratNumber) {
                    record.caratNumber = record.caratNumber.replace(
                      /[^\d\.]/g,
                      ''
                    );
                  }
                }
              "
              size="small"
              style="width: 100%"
              v-model="record.caratNumber"
            />
          </template>
        </a-table-column>
        <!-- 操作 -->
        <a-table-column
          v-if="inputShow != 'info'"
          key="operation"
          data-index="operation"
          title="操作"
          width="55px"
          align="center"
        >
          <template slot-scope="text, record">
            <a-popconfirm
              title="确定删除吗?"
              okText="确定"
              cancelText="取消"
              @confirm="() => onDelete(record, record.key)"
            >
              <a
                href="javascript:;"
                style="
                  color: rgb(243, 56, 29);
                  border-bottom: 1px solid rgb(243, 56, 29);
                "
                >删除</a
              >
            </a-popconfirm>
          </template>
        </a-table-column>
      </a-table>

      <h3
        style="margin-top: 20px"
        v-if="tabKey === '6' && modalFlag === 'systemEdit'"
      >
        上传文件
      </h3>
      <div v-if="tabKey === '6' && modalFlag === 'systemEdit'">
        <a-upload
          :beforeUpload="beforeUploads"
          :action="baseUrl + `/by-file/uploadBatchFile`"
          list-type="picture-card"
          :file-list="fileList"
          @change="handleChange"
          :headers="headers"
          @preview="handlePreview"
        >
          <div v-if="fileList.length < 6">
            <a-icon type="plus" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </div>
      <h3 v-if="tabKey != '6' && tabKey != '66' && modalFlag != 'add'">
        产品图片确认
      </h3>
      <div v-if="tabKey != '6' && tabKey != '66' && modalFlag != 'add'">
        <span v-if="imgUrlArray.length <= 0">暂无图片 </span>
        <span v-for="(item, i) in imgUrlArray" :key="i">
          <a :href="item" target="_blank">
            <img style="width: 10rem; height: 8rem; margin: 10px" :src="item"
          /></a>
        </span>
      </div>
      <h3 style="margin-top: 20px">备注信息：</h3>
      <div class="remark">
        <a-textarea :maxLength="256" :rows="2" v-if="inputShow != 'info'" v-model="dto.remark" />
        <span v-if="inputShow === 'info'">
          {{ dto.remark === null || dto.remark === "" ? "暂无" : dto.remark }}
        </span>
      </div>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
      <h3 v-if="(tabKey === '56' || tabKey === '600') && modalFlag != 'add'">
        服务项选择
      </h3>
      <div v-if="(tabKey === '56' || tabKey === '600') && modalFlag != 'add'">
        <a-button
          v-if="
            dto.retreatState === '46' &&
            dto.isServiceItem * 1 == 0 &&
            terminal === '1' &&
            btnFlag
          "
          type="primary"
          size="small"
          @click="returnServiceModal"
        >
          服务项登记
        </a-button>

        <a-button v-else size="small" type="primary" @click="costServiceInfo">
          服务项登记查看
        </a-button>
      </div>
    </a-spin>
    <!-- //服务项登记 -->
    <ReturnService
      @updateModalData="updateModalData"
      :getModalData="getModalData"
      :modalFlag="modalFlag"
      :inputShow="inputShow"
    />
    <!-- 服务项信息查看 -->
    <ServiceModalReap
      @updateModalData="updateModalData"
      :getModalData="getModalData"
      :modalFlag="modalFlag"
      :inputShow="inputShow"
    />
  </a-modal>
</template>

<script>
import { mapState } from "vuex";
import ServiceModalReap from "@/components/serviceModal/ServiceModalReap.vue";
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
import ReturnService from "./ReturnService.vue";
import baseUrl from "@/utils/baseUrl";
import { treeTagDictionary, removefile, warehouse_select } from "@/apis/common";
import {
  getRetreatStock,
  by_retreatApply,
  by_retreatApply_edit,
  by_retreatApply_submit,
  by_retreatApply_csrSubmit,
  by_retreatApply_whSubmit,
  by_retreatApply_through,
  by_retreatApply_reviewService,
  by_retreatApply_faAudit,
  by_retreatApply_forecastData,
} from "@/apis/clientSide/ReturnsList/ReturnsList";
import { box_list } from "@/apis/system/setManage/addBox";
import { by_retreatApply_Info } from "@/apis/clientSide/ReturnsList/ReturnsList";
export default {
  props: [
    "getServeTableList",
    "warehouse",
    "getTableList",
    "getCountList",
    "tabKey",
  ],
  components: {
    ReturnService,
    ServiceModalReap,
  },

  data() {
    return {
      port: sessionStorage.getItem("terminal"),
      //两端标杆
      terminal: sessionStorage.getItem("terminal"),
      spinning: false,
      applyCode: null,
      //模态框状态
      retreatState: "",
      cancelLoading: false,
      btnFlag: true,
      imgUrlArray: [],
      baseUrl,
      fileList: [],
      // 图片预览标杆
      previewVisible: false,
      previewImage: "",
      headers: {
        authorization: "authorization-text",
        // ContentType: '["multipart/form-data"]',
        token: sessionStorage.getItem("tk"),
      },
      //是否可编辑标杆
      inputShow: "",
      //模态框显示标杆
      modalFlag: "",
      passFlag: true,
      // 退件SKU数组
      RetreatStockArray: [],
      // 处理方式数组
      treatmentArray: [],
      checkFlag: false,
      //库位数据
      storageLocation: [],
      //模态框显示
      visible: false,
      //模态框标杆
      loading: false,
      rules: {
        title: [
          {
            required: true,
            message: "退件标题必填!",
            trigger: "blur",
          },
        ],
        warehousingId: [
          {
            required: true,
            message: "入库仓库必选!",
            trigger: "blur",
          },
        ],
        typeId: [
          {
            required: true,
            message: "退件处理类型必选!",
            trigger: "blur",
          },
        ],
      },
      //表格数据
      dto: {
        logisticsInfos: [],
        remark: null,
        title: null,
        typeId: null,
        typeName: null,
        warehousingId: null,
        warehousingName: null,
      },
      styleBack: {
        border: "1px solid #f00",
        borderRadius: "5px",
      },
      styleYes: {
        border: "1px solid #ccc",
        borderRadius: "5px",
      },
      boxlist: [],
    };
  },

  created() {
    this.getSelection();
    this.getBoxList();
  },
  mounted() {
    this.$bus.$off("retreatApply_Info");
    this.$bus.$on("retreatApply_Info", (data, flag, show) => {
      this.getModalData(data.id, flag, show);
    });
  },
  methods: {
    updateModalData(data) {
      if (data == 1) {
        this.btnFlag = false;
      } else {
        this.btnFlag = true;
      }
    },
    //费用服务项信息查看
    costServiceInfo() {
      setTimeout(() => {
        if (this.dto.retreatState === "46") {
          this.$bus.$emit(
            "reappearance",
            this.dto,
            5,
            this.dto.id,
            true,
            "warehouse"
          );
        } else if (this.dto.retreatState === "116") {
          this.$bus.$emit("reappearance", this.dto, 5, this.dto.id, true);
        } else {
          this.$bus.$emit("reappearance", this.dto, 5, this.dto.id, false);
        }
      }, 50);
    },
    //退件服务项登记
    returnServiceModal() {
      setTimeout(() => {
        this.$bus.$emit("ReturnService", this.dto);
      }, 50);
    },
    //获取预报数据
    async forecastData() {
      if (this.applyCode === null || this.applyCode === "") {
        this.$message.error("请输入预报编号后拉取预报数据！");
        return false;
      }
      let { code, responseBody } = await by_retreatApply_forecastData(
        this.applyCode
      );
      if (code === "200") {
        this.dto.logisticsInfos = responseBody;
        this.$message.success("拉取成功！");
      } else {
        return false;
      }
    },
    //发送账单
    sendBill() {
      this.loading = true;
      setTimeout(async () => {
        this.dto.logisticsInfos.forEach((item) => {
          item.byRetreatProductInfos.forEach((v) => {
            if (v.locationId) {
              v.locationId = v.locationId.join(",");
            }
          });
        });
        let { code } = await by_retreatApply_faAudit(this.dto);
        if (code === "10000") {
          this.getServeTableList();
          this.loading = false;
          this.visible = false;
        }
      }, 1000);
    },
    //获取模态框数据
    async getModalData(id, flag, show) {
      this.spinning = true;
      let { code, responseBody } = await by_retreatApply_Info(id);
      if (code === "200") {
        if (this.$refs.fromDto) {
          this.$refs.fromDto.resetFields();
        }
        this.retreatState = responseBody.retreatState;
        this.visible = true;
        this.imgUrlArray = [];
        if (
          responseBody.retreatFile != "" &&
          responseBody.retreatFile != null
        ) {
          this.imgUrlArray = responseBody.retreatFile.split(",");
        }

        responseBody.logisticsInfos.forEach((item) => {
          item.key = item.id;
          item.byRetreatProductInfos.forEach((v) => {
            if (v.locationId) {
              v.locationId = v.locationId.split(",");
            }
          });
        });
        this.dto = { ...responseBody };
        this.modalFlag = flag;
        if (this.dto.isServiceItem == "0") {
          this.btnFlag = true;
        }
        this.applyCode = null;
        this.getStorageLocation();
        this.inputShow = show;
        this.spinning = false;
      }
    },
    //改变箱子
    handleChangeBox(value, option, record) {
      record.newLengthNumber = option.data.attrs.lengthNumber;
      record.newWideNumber = option.data.attrs.wideNumber;
      record.newHighNumber = option.data.attrs.highNumber;
      record.pageType = option.data.attrs.boxName;
      record.pageTypeId = value;
    },
    //处理完成
    figureOut() {
      this.passFlag = true;
      this.loading = true;
      this.dto.logisticsInfos.forEach((item) => {
        if (this.dto.typeId != "10181") {
          if (
            item.newWideNumber === null ||
            item.newWideNumber === "" ||
            item.newWideNumber * 1 === 0 ||
            item.newLengthNumber === null ||
            item.newLengthNumber === "" ||
            item.newLengthNumber * 1 === 0 ||
            item.newHighNumber === null ||
            item.newHighNumber === "" ||
            item.newHighNumber * 1 === 0
          ) {
            this.passFlag = false;
            return false;
          }
        }
        if (this.dto.typeId != "10181" && this.dto.typeId != "10186") {
          item.byRetreatProductInfos.forEach((v) => {
            if (v.locationId === "" || v.locationId === null) {
              this.passFlag = false;
              return false;
            }
          });
        }
      });

      if (this.passFlag) {
        setTimeout(async () => {
          this.dto.logisticsInfos.forEach((item) => {
            item.byRetreatProductInfos.forEach((v) => {
              if (v.locationId) {
                v.locationId = v.locationId.join(",");
              }
            });
          });
          let { code } = await by_retreatApply_reviewService(this.dto);
          if (code === "10000") {
            this.loading = false;
            this.visible = false;
            this.getTableList();
            this.getCountList();
          }
        }, 1000);
      } else {
        this.$message.error("必填项缺失，请检查必填项！");
        this.loading = false;
      }
    },
    // 仓位改变
    onChangeLocation(value, selectedOptions, item) {
      // item.locationId = value.join(",");
      let arr = [];
      selectedOptions.forEach((item) => {
        arr.push(item.titleName);
        item.locationName += item.titleName;
      });
      item.locationName = arr.join(",");
    },
    //仓库再次确认-到已接收未结算:600 已接收，66：取消入库
    async whSubmit(flag) {
      if (flag === "46") {
        this.loading = true;
        if (this.dto.retreatState === "26") {
          this.$message.error("客户未确认，不能接收入库！");
          this.loading = false;
          return false;
        }
      } else {
        this.cancelLoading = true;
      }
      setTimeout(async () => {
        if (flag === "66") {
          if (this.dto.retreatFile != "" || this.dto.retreatFile != null) {
            let { code } = await removefile(this.dto.retreatFile.split(","));
            if (code === "10000") {
              this.dto.retreatFile = "";
            }
          }
        }
        this.dto.logisticsInfos.forEach((item) => {
          item.byRetreatProductInfos.forEach((v) => {
            if (v.locationId) {
              v.locationId = v.locationId.join(",");
            }
          });
        });
        let { code } = await by_retreatApply_whSubmit(flag, this.dto);
        if (code === "10000") {
          this.visible = false;
          this.loading = false;
          this.cancelLoading = false;
          this.getTableList();
          this.getCountList();
        }
      }, 1000);
    },
    //客户端待确认 确认按钮
    isCheckBtn() {
      this.loading = true;
      setTimeout(async () => {
        this.dto.logisticsInfos.forEach((item) => {
          item.byRetreatProductInfos.forEach((v) => {
            if (v.locationId) {
              v.locationId = v.locationId.join(",");
            }
          });
        });
        let { code } = await by_retreatApply_csrSubmit(this.dto);
        if (code === "10000") {
          this.visible = false;
          this.loading = false;
          this.getTableList();
          this.getCountList();
        }
      }, 1000);
    },
    //管理端提交
    submit() {
      this.loading = true;
      if (this.imgUrlArray.length <= 0) {
        this.$message.error("请上传图片后提交！");
        this.loading = false;
        return false;
      }
      this.dto.retreatFile = this.imgUrlArray.join(",");
      setTimeout(async () => {
        this.dto.logisticsInfos.forEach((item) => {
          item.byRetreatProductInfos.forEach((v) => {
            if (v.locationId) {
              v.locationId = v.locationId.join(",");
            }
          });
        });
        let { code } = await by_retreatApply_submit(this.dto);
        if (code === "10000") {
          this.loading = false;
          this.visible = false;
          this.imgUrlArray = [];
          this.getTableList();
          this.getCountList();
          this.fileList = [];
        }
      }, 1000);
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    beforeUploads(file) {
      return new Promise((resolve, reject) => {
        this.files = file;
        const isLt6M = file.size / 1024 / 1024 < 6;
        const img =
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/jpg";
        if (!img) {
          this.$message.error("上传文件只能是 png、jpeg、jpg!");
          return reject(false);
        }
        if (!isLt6M) {
          this.$message.error("文件大小限制小于6MB!");
          return reject(false);
        }
        return resolve(true);
      });
    },
    //上传传文件
    async handleChange(file) {
      this.fileList = file.fileList;
      if (file.file.status === "done") {
        if (file.file.response) {
          this.imgUrlArray.push(file.file.response.responseBody.join(","));
        }
      }
      if (file.file.status === "removed") {
        let { code } = await removefile(file.file.response.responseBody);
        if (code === "10000") {
          if (this.imgUrlArray.length >= 1) {
            this.imgUrlArray.forEach((item, i) => {
              if (item === file.file.response.responseBody.join(",")) {
                this.imgUrlArray.splice(i, 1);
              }
            });
          }
        }
      }
    },
    //仓库改变
    changeWarehousing(option) {
      this.dto.warehousingName = option.data.attrs.warehousingName;
    },
    //物流方式改变
    changeLogisticsName(option, record) {
      record.logisticsName =
        option.data.attrs.serviceName +
        "/" +
        option.data.attrs.logisticsPlatform;
      record.logisticsId =
        option.data.attrs.sysLogisticsId +
        "," +
        option.data.attrs.sysLogisticsServiceItemId;
    },
    //退件处理改变
    changeTypeId(option) {
      this.dto.typeName = option.data.attrs.titles;
    },
    //SKU改变
    changeSku(option, item, record) {
      item.sku = null;
      let flag = true;
      record.byRetreatProductInfos.forEach((v) => {
        if (option.data.attrs.sku === v.sku) {
          flag = false;
          item.skuName = "请选择SKU";
          this.$message.error("同一箱子只能不能添加多个同名SKU！");
        }
      });
      if (flag) {
        item.skuName = option.data.attrs.name;
        item.skuId = option.data.attrs.skuid;
        item.sku = option.data.attrs.sku;
        item.productTag = option.data.attrs.productTag;
      }
    },
    //模态框确定
    handleOk(tabKey) {
      this.loading = true;
      this.passFlag = true;
      this.$refs.fromDto.validate((valid) => {
        if (valid) {
          if (this.dto.logisticsInfos.length === 0) {
            this.$message.error("请新增箱子！");
            this.loading = false;
            return false;
          }
          if (this.dto.logisticsId === "" || this.dto.logisticsId === null) {
            this.$message.error("请检查必填项!");
            this.loading = false;
            return false;
          }
          this.dto.logisticsInfos.forEach((item) => {
            if (
              item.highNumber === null ||
              item.highNumber === "" ||
              item.lengthNumber === null ||
              item.lengthNumber === "" ||
              item.wideNumber === null ||
              item.wideNumber === "" ||
              item.caratNumber === null ||
              item.caratNumber === "" ||
              item.waybillNm === null ||
              item.waybillNm === ""
            ) {
              this.passFlag = false;
              this.loading = false;
              return false;
            }
            if (
              item.packingNumber * 1 <= 0 ||
              item.packingNumber === undefined ||
              item.packingNumber === null ||
              item.packingNumber === ""
            ) {
              this.passFlag = false;
              return false;
            }
            item.byRetreatProductInfos.forEach((v) => {
              if (
                v.skuId === null ||
                v.skuId === "" ||
                v.productNumber === null ||
                v.productNumber === ""
              ) {
                this.passFlag = false;
              }
            });
          });

          if (this.passFlag) {
            this.dto.retreatType = 0;
            if (this.modalFlag === "add") {
              setTimeout(async () => {
                this.dto.forecastNo = this.applyCode;
                let { code } = await by_retreatApply(this.dto);
                if (code === "10000") {
                  this.loading = false;
                  this.visible = false;
                  this.applyCode = undefined;
                  this.getTableList();
                  this.getCountList();
                }
              }, 1000);
            } else if (this.modalFlag === "editcClientSide") {
              if (tabKey === "6") {
                setTimeout(async () => {
                  let { code } = await by_retreatApply_edit(this.dto);
                  if (code === "10000") {
                    this.loading = false;
                    this.visible = false;
                    this.getTableList();
                    this.getCountList();
                  }
                }, 1000);
              } else if (tabKey === "66") {
                setTimeout(async () => {
                  let { code } = await by_retreatApply_through("6", this.dto);
                  if (code === "10000") {
                    this.loading = false;
                    this.visible = false;
                    this.getTableList();
                    this.getCountList();
                  }
                }, 1000);
              }
            }
          } else {
            this.loading = false;
            this.$message.error("请检查必填项!");
          }
        } else {
          this.loading = false;
          this.$message.error("请检查必填项!");
        }
      });
    },
    //删除箱子每一行
    onDelete(record, key) {
      this.dto.logisticsInfos.forEach((item, i) => {
        if (item.key === key) {
          this.dto.logisticsInfos.splice(i, 1);
        }
      });
    },
    //新增每一行SKU
    addSku(record) {
      let obj = {
        fnsku: null,
        productNumber: null,
        retreatLogisticsId: null,
        skuId: null,
        skuName: null,
      };
      obj.skuName = "请选择SKU";
      record.byRetreatProductInfos.push(obj);
      obj.key = Math.random();
      this.dto.logisticsInfos.forEach((item, index) => {
        if (record.key === item.key) {
          this.dto.logisticsInfos[index].byRetreatProductInfos =
            record.byRetreatProductInfos;
        }
      });
    },
    //新增箱子
    addBox() {
      let boxlist = {
        byRetreatProductInfos: [],
        caratNumber: null,
        highNumber: null,
        lengthNumber: null,
        logisticsId: null,
        logisticsName: null,
        packingNumber: null,
        retreatType: null,
        waybillNm: null,
        wideNumber: null,
      };
      boxlist.key = Math.random();
      let obj = {
        fnsku: null,
        productNumber: null,
        retreatLogisticsId: null,
        skuId: null,
        skuName: null,
      };
      obj.skuName = "请选择SKU";
      obj.key = this.dto.logisticsInfos.length;
      boxlist.byRetreatProductInfos.push(obj);
      this.dto.logisticsInfos.push(boxlist);
    },
    //删除每一行SKU
    delSku(record, item) {
      record.byRetreatProductInfos.forEach((v, i) => {
        if (v.key === item.key) {
          if (record.byRetreatProductInfos.length === 1) {
            this.$message.error("每个箱子最少存放一个SKU！");
            return false;
          }
          record.byRetreatProductInfos.splice(i, 1);
        }
      });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    showModal() {
      if (this.$refs.fromDto) {
        this.$refs.fromDto.resetFields();
      }
      this.inputShow = null;
      this.modalFlag = "add";
      this.visible = true;
      this.dto = {
        logisticsInfos: [],
        remark: null,
        title: null,
        typeId: null,
        typeName: null,
        warehousingId: null,
        warehousingName: null,
      };
      this.applyCode = null;
    },
    //获取下拉框选择值
    async getSelection() {
      let { code, responseBody } = await treeTagDictionary({
        tagType: 8,
      });
      if (code === "200") {
        this.treatmentArray = responseBody;
      }

      let res = await getRetreatStock();
      if (res.code === "200") {
        this.RetreatStockArray = res.responseBody;
      }
    },
    //获取库位
    async getStorageLocation() {
      let { code, responseBody } = await warehouse_select({
        warehousePid: this.dto.warehousingId,
        isTree: true,
      });
      if (code === "200") {
        this.storageLocation = this.getSkuTypeThree(responseBody);
      }
    },
    //封装组装后台数据
    getSkuTypeThree(data) {
      data.forEach((item) => {
        item.label = item.titleName;
        item.children = item.child;
        item.value = item.warehouseId;
        item.sort = this.sort;
        if (item.children && item.children.length >= 1) {
          this.sort += 1;
          this.getSkuTypeThree(item.children);
        }
      });
      this.sort = 0;
      return data;
    },
    async getBoxList() {
      let { code, responseBody } = await box_list();
      if (code === "200") {
        this.boxlist = responseBody;
      }
    },
  },
  computed: {
    ...mapState(["logisticsArray"]),
  },
};
</script>

<style lang="less" scoped>
.row-btn {
  font-size: 18px;
  i {
    margin: 0 5px;
    cursor: pointer;
  }
}
/deep/.ant-table-header-column {
  width: 100% !important;
}

/deep/.blueBtn {
  background: #409cff;
  color: #fff !important;
  border: 1px solid #409cff !important;
}
.blueBtn:focus,
.blueBtn:hover {
  background: #409cff;
  color: #fff !important;
  border: 1px solid #409cff !important;
}
/deep/.columns-tab {
  width: 10% !important;
  .columns {
    display: flex;
    div {
      // width: 110px;
      text-align: center;
      border: 1px solid #ccc;
    }
  }
}
/deep/.columns-tabs {
  width: 10% !important;
  .columns {
    display: flex;
    div {
      // width: 110px;
      text-align: center;
      border: 1px solid #ccc;
    }
  }
}

.pto-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    // width: 110px;
    // flex: 1;
    border: 1px solid #ccc;
    box-sizing: border-box;
    // padding: 3px 0;
    // height: 2rem;
  }
}
.pto-lists {
  display: flex;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  li {
    // width: 110px;
    flex: 1;
    border: 1px solid #ccc;
    box-sizing: border-box;
    // padding: 3px 0;
    // line-height: 2.7rem;
  }
}

/deep/.ant-modal-footer {
  text-align: center !important;
  button {
    margin: 0 50px;
  }
}
</style>
